<template>
  <view class="conditioning-container">
    <!-- 顶部标题 -->
    <view class="top-nav">
      <view class="nav-item active">
        <text class="nav-text">调理安排</text>
      </view>
    </view>

    <!-- 调理内容区域 -->
    <view class="content-area">
      <!-- 调理计划列表 -->
      <view class="treatment-list">
        <view class="treatment-item" v-for="(item, index) in treatmentPlans" :key="index">
          <view class="treatment-header">
            <text class="treatment-title">{{ item.title }}</text>
            <text class="treatment-status" :class="item.status">{{
              item.statusText
            }}</text>
          </view>
          <view class="treatment-content">
            <text class="treatment-desc">{{ item.description }}</text>
            <view class="treatment-schedule">
              <text class="schedule-time">{{ item.schedule }}</text>
              <text class="schedule-frequency">{{ item.frequency }}</text>
            </view>
          </view>
          <view class="treatment-actions">
            <button class="action-btn complete-btn" @click="completeTreatment(index)">
              完成
            </button>
            <button class="action-btn skip-btn" @click="skipTreatment(index)">
              跳过
            </button>
          </view>
        </view>
      </view>

      <!-- 添加新调理计划按钮 -->
      <view class="add-treatment-btn" @click="showAddTreatmentModal">
        <text class="add-icon">+</text>
        <text class="add-text">添加调理计划</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      treatmentPlans: [
        {
          title: "晨间冥想",
          status: "pending",
          statusText: "待完成",
          description: "进行15分钟的冥想练习，帮助放松身心",
          schedule: "每天 07:00",
          frequency: "每日一次",
        },
        {
          title: "午间散步",
          status: "completed",
          statusText: "已完成",
          description: "在午餐后进行30分钟的户外散步",
          schedule: "每天 12:30",
          frequency: "每日一次",
        },
        {
          title: "晚间拉伸",
          status: "skipped",
          statusText: "已跳过",
          description: "进行20分钟的全身拉伸运动",
          schedule: "每天 21:00",
          frequency: "每日一次",
        },
      ],
    };
  },
  methods: {
    completeTreatment(index) {
      this.treatmentPlans[index].status = "completed";
      this.treatmentPlans[index].statusText = "已完成";
    },
    skipTreatment(index) {
      this.treatmentPlans[index].status = "skipped";
      this.treatmentPlans[index].statusText = "已跳过";
    },
    showAddTreatmentModal() {
      // 跳转到调理计划页面
      uni.navigateTo({
        url: "/pages/conditioning/planning",
      });
    },
  },
};
</script>

<style lang="scss">
/* 多邻国风格的颜色变量 */
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-purple: #ce82ff;
$duolingo-orange: #ff9600;
$duolingo-red: #ff4b4b;
$duolingo-light-gray: #f7f7f7;
$duolingo-dark-gray: #4b4b4b;

.conditioning-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
  padding: 20rpx;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid $duolingo-light-gray;
}

.nav-item {
  padding: 10rpx 30rpx;
  position: relative;
  margin: 0 20rpx;
  cursor: pointer;
}

.nav-item.active {
  color: $duolingo-green;

  &::after {
    content: "";
    position: absolute;
    bottom: -2rpx;
    left: 0;
    width: 100%;
    height: 4rpx;
    background-color: $duolingo-green;
    border-radius: 2rpx;
  }
}

.nav-text {
  font-size: 32rpx;
  color: $duolingo-dark-gray;
  font-weight: bold;
}

.nav-item.active .nav-text {
  color: $duolingo-green;
}

/* 调理计划列表样式 */
.treatment-list {
  width: 100%;
}

.treatment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.treatment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.treatment-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
}

.treatment-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;

  &.pending {
    background-color: $duolingo-orange;
    color: #fff;
  }

  &.completed {
    background-color: $duolingo-green;
    color: #fff;
  }

  &.skipped {
    background-color: $duolingo-light-gray;
    color: $duolingo-dark-gray;
  }
}

.treatment-content {
  margin-bottom: 20rpx;
}

.treatment-desc {
  font-size: 28rpx;
  color: $duolingo-dark-gray;
  margin-bottom: 10rpx;
  display: block;
}

.treatment-schedule {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: $duolingo-dark-gray;
}

.treatment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.action-btn {
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;

  &.complete-btn {
    background-color: $duolingo-green;
    color: #fff;
  }

  &.skip-btn {
    background-color: $duolingo-light-gray;
    color: $duolingo-dark-gray;
  }
}

/* 添加新调理计划按钮样式 */
.add-treatment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $duolingo-blue;
  color: #fff;
  padding: 20rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.add-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.add-text {
  font-size: 28rpx;
  font-weight: bold;
}
</style>
